<template>
	<view style="display: flex;flex-direction: column;align-items: center;width: 100vw;">
		<view class="statisitcWrapper">
			<view class="header">
				<view class="left">
					数据概览

					
					<text style="color: #888;font-size: 22rpx;font-weight: normal;margin-left: 10rpx;">(数据更新至昨日)</text>			
		
				</view>
				<view class="right" @click="gotoMore">
					更多
					<u-icon style="margin-right: 10rpx;" :size="'30rpx'" color="#666" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="timeWrapper">
				<view class="item" :class="{itemEn: statisitcSelectDay == 0}" @click="onChangeSelectType(0)">
					昨天
				</view>
				<view class="item" :class="{itemEn: statisitcSelectDay == 1}" @click="onChangeSelectType(1)">
					本周
				</view>
				<view class="item" :class="{itemEn: statisitcSelectDay == 2}" @click="onChangeSelectType(2)">
					本月
				</view>
				<view class="item" :class="{itemEn: statisitcSelectDay == 3}" @click="onChangeSelectType(3)">
					近30天
				</view>

				<view class="refresh" @click="getTiktokVideoSimpleStat">
					刷新
					<image class="icon" src="@/static/image/icon_refresh.png" mode=""></image>
				</view>
			</view>
			<view class="content">
				<view class="item">
					{{statisticObj.videoNum}}
					<text class="text">
						作品
					</text>
				</view>
				<view class="item">
					{{statisticObj.playNum}}
					<text class="text">
						播放数
					</text>
				</view>
				<view class="item">
					{{statisticObj.customerNumWithPhone}}
					<text class="text">
						留电数
					</text>
				</view>
			</view>
		</view>

		<view class="tiktokContainer">
			<view class="title">
				挂载小雪花
			</view>
	<!-- 		<view class="sub">
				小程序
				<image src="../static/image/add.png" class="icon" mode=""></image>
				<text class="text">梦维云</text>
			</view> -->
			
			<u-tabs :list="utabList"
				active-color="#16a5fe" 
				inactive-color="#606266"
				:lineHeight="'6rpx'" 
				:lineWidth="'60rpx'"
				:keyName="'title'" @change="onChangeTab"></u-tabs>
				
			<sandbox v-if="currentTab=='MATERIALS_SAND_TABLE'">			
			</sandbox>
			<unitType v-if="currentTab=='MATERIALS_HOUSE_TYPE'">
			</unitType>
			<building v-if="currentTab=='MATERIALS_BUILD_INFO'">
			</building>
			<buildingAlbum v-if="currentTab=='MATERIALS_BUILD_IMAGE'">
			</buildingAlbum>
			<buildingVideo v-if="currentTab=='MATERIALS_BUILD_VEDIO'">
			</buildingVideo>
			<noteList v-if="currentTab=='MATERIALS_NOTE'">
			</noteList>
			
		</view>

	</view>
</template>

<script>
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	import sandbox from "./components/sandbox.vue"
	import unitType from "./components/unitType.vue"
	import building from "./components/building.vue"
	import buildingAlbum from "./components/buildingAlbum.vue"
	import buildingVideo from "./components/buildingVideo.vue"
	import noteList from "./components/noteList.vue"
	
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	let that = null


	export default {
		components:{
			sandbox,
			unitType,
			building,
			buildingAlbum,
			buildingVideo,
			noteList
		},
		data() {
			return {
				statisitcSelectDay: 0,
				utabList:[],
				
				materialList: [
					{
						url: '/pages/shop/material/project/myNote',
						type: 'MATERIALS_NOTE',
						isShow: false,
						icon: '/pages/shop/static/image/icon_daogoubiji.png',
						title: '导购笔记'
					},
					{
						url: '/pages/shop/material/project/sandbox',
						type: 'MATERIALS_SAND_TABLE',
						isShow: false,
						icon: '/pages/shop/static/image/icon_shapanwuliao.png',
						title: '沙盘物料'
					}, {
						url: '/pages/shop/material/project/unitType',
						type: 'MATERIALS_HOUSE_TYPE',
						isShow: false,
						icon: '/pages/shop/static/image/icon_huxingtu.png',
						title: '户型图',
					},
					{
						url: '/pages/shop/material/project/building',
						type: 'MATERIALS_BUILD_INFO',
						isShow: false,
						icon: '/pages/shop/static/image/icon_loupanxinxi.png',
						title: '楼盘信息'
					},
					{
						url: '/pages/shop/material/project/buildingAlbum',
						type: 'MATERIALS_BUILD_IMAGE',
						isShow: false,
						icon: '/pages/shop/static/image/icon_loupantupian.png',
						title: '楼盘相册'
					},
					{
						url: '/pages/shop/material/project/buildingVideo',
						type: 'MATERIALS_BUILD_VEDIO',
						isShow: false,
						icon: '/pages/shop/static/image/icon_loupanshipin.png',
						title: '楼盘视频'
					},

					// {
					// 	url: '/pages/shop/material/project/traffic',
					// 	type: 'MATERIALS_PERIPHERY_TYPE',
					// 	isShow: false,
					// 	icon: '/pages/shop/static/image/icon_zhoubianpeitao.png',
					// 	title: '周边配套'
					// },
					
				],
				currentTab: "",
				sandboxList: [],
				
				statisticObj:{
					videoNum: 0,
					customerNumWithPhone: 0,
					playNum: 0, 
				}
			};
		},

		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isSeller: state => state.userInfo.isSeller,
				sellerObj: state => state.userInfo.sellerObj,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,
			}),
		},

		onLoad(options) {
			that = this;
			that.getProjectMaterials()
			that.getTiktokVideoSimpleStat()
		},
		onShow() {

		},
		methods: {
			...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setOrigin"]),
			onChangeTab(item){
				console.log("onChangeTab",item)
				var type = item.type
				this.currentTab = type
			},
			onChangeSelectType(index){
				this.statisitcSelectDay = index
				this.getTiktokVideoSimpleStat()
			},
			
			gotoMore(){
				uni.navigateTo({
					url: "./statisticTiktok"
				})
			},
			
			getDays(index){
				let date = new Date()
				let days = 0
				let day = date.getDate();
				let week = date.getDay();
				switch(index){
					case 0:
						//昨天
						days = 1
						break;
					case 1:
						//本周
						days = week - 1
						break;
					case 2:
						//本月
						days = day - 1
						break;
					case 3:
						//近30天
						days = 30
						break;
				}
				return -days
			},
			
			getTiktokVideoSimpleStat() {
			    let that = this
				let period = that.getDays(that.statisitcSelectDay) 
				if (period<0){
					uni.showLoading({
						title: '正在加载...'
					});
					api.getTiktokVideoSimpleStat({
					    param: {
					        period: period
					    }
					}).then(res => {
					    console.log("getTiktokVideoSimpleStat:",res)
					    if (res.success) {  
							that.statisticObj.videoNum = res.data.videoNum
							that.statisticObj.customerNumWithPhone = res.data.customerNumWithPhone
							that.statisticObj.playNum = res.data.playNum
					
					    }
					}).finally(()=>{
						uni.hideLoading();
					})
				}else{
					that.statisticObj.videoNum = 0
					that.statisticObj.customerNumWithPhone = 0
					that.statisticObj.playNum = 0
				}  
			},
			
			getProjectMaterials() {
			    let that = this
			    api.getProjectMaterials({
			        param: {
			
			        }
			    }).then(res => {
			        console.log(res)
			        if (res.success) {
						that.utabList.splice(0, that.utabList.length)
						for (var i in that.materialList){
							for (var key in res.data){
			                    if (that.materialList[i].type == key){
			                        if (res.data[key]==1){
			                            that.materialList[i].isShow = true
										that.utabList.push(that.materialList[i])
			                        }else{
			                            that.materialList[i].isShow = false
			                        }
			                    }
			                }
			            }
						if (that.utabList.length>0){
							that.currentTab = that.utabList[0].type
						}
						
			        }
			    })
			},
		}
	}
</script>
<style>
	page {
		background-color: #f3f3f3;
	}
</style>
<style lang="scss">
	.statisitcWrapper {
		padding: 30rpx 40rpx;
		width: 708rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 30rpx;

		.header {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				font-size: 24rpx;
				font-weight: bold;
				line-height: 40rpx;
				color: #3e3a39;
				display: flex;
				align-items: center;
			}

			.right {
				font-size: 24rpx;
				font-weight: bold;
				line-height: 40rpx;
				color: #666;
				display: flex;
			}
		}

		.content {
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 50rpx;
			margin-bottom: 10rpx;

			.item {
				display: flex;
				align-items: center;
				flex-direction: column;
				font-size: 50rpx;
				color: #5E9FFD;
				font-weight: bold;

				.text {
					margin-top: 15rpx;
					font-size: 22rpx;
					color: #888;
					font-weight: normal;
				}
			}
		}
	}

	.tiktokContainer {
		width: 100%;
		min-height: 1100rpx;
		background-color: #ffffff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 30rpx 30rpx;
		margin-top: 20rpx;
		// position: sticky;
		.title{
			font-size: 24rpx;
			font-weight: bold;
			color: #3e3a39;
			line-height: 40rpx;
			margin-bottom: 40rpx;
		}
		.sub{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #888;
			margin-bottom: 30rpx;
			
			.text{
				color: #333;
			}
			.icon{
				border-radius: 50%;
				width: 40rpx;
				height: 40rpx;
				margin-left: 30rpx;
				margin-right: 15rpx;
			}
		}
	}

	.timeWrapper {
		display: flex;
		align-items: center;
		width: 100%;
		margin-top: 30rpx;

		.refresh {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #999999;
			margin-left: 60rpx;

			.icon {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		}

		.item {
			padding: 0 20rpx;
			height: 45rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 45rpx;
			background: #F3F1F3;
			font-size: 24rpx;
			color: #999999;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.iconRange {
				width: 30rpx;
				height: 30rpx;
				margin-left: 15rpx;
				margin-right: 15rpx;
				background-image: url(@/static/image/icon_time_range.png);
			}
		}

		.itemEn {
			background: #5E9FFD;
			color: #FFFFFF;
		}
	}
</style>